<template>
  <!-- 父对象指定的 color 格式，子对象可以直接通过 currentColor 引用 -->
  <div class="w-400px h-400px" :style="{ color }">
    <svg-no-permission v-if="type === '403'"></svg-no-permission>
    <svg-not-found v-if="type === '404'"></svg-not-found>
    <svg-service-error v-if="type === '500'"></svg-service-error>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import { SvgNoPermission, SvgNotFound, SvgServiceError } from './components'

interface Props {
  type?: '403' | '404' | '500'
  color?: string
}

withDefaults(defineProps<Props>(), {
  type: '404',
  color: '#409eff',
})
</script>

<style scoped></style>
